<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入内容" v-model='queryInfo.query' clearable @clear='getUserList'>
            <el-button slot="append" icon="el-icon-search" @click='getUserList'></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click='addDialogVisible=true'>添加用户</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data='userlist' border stripe>
        <el-table-column type='index'></el-table-column>
        <el-table-column label='姓名' prop='username'></el-table-column>
        <el-table-column label='邮箱' prop='email'></el-table-column>
        <el-table-column label='电话' prop='mobile'></el-table-column>
        <el-table-column label='角色' prop='role_name'></el-table-column>
        <el-table-column label='状态' prop='mg_state'>
          <template slot-scope='scope'>
            <el-switch v-model="scope.row.mg_state" @change='userStateChanged(scope.row)'>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label='操作'>
          <template slot-scope='scope'>
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" circle @click='showEditLog(scope.row.id)'></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" @click="removeUserById(scope.row.id)" circle></el-button>
            <!-- 分配按钮 -->
            <el-tooltip effect='dark' class="item" content="分配角色" placement="top" :enterable='false'>
              <el-button type="warning" icon="el-icon-setting" circle @click='setRole(scope.row)'></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 对话框组件  :visible.sync(设置是否显示对话框) width(设置对话框的宽度)
:before-close(在对话框关闭前触发的事件) -->
    <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close='addDialogClosed'>
      <!-- 对话框主体区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户对话框 -->
    <el-dialog title='修改用户' :visible.sync='editDialogVisible' width='50%' @close='editDialogClosed'>
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop='email'>
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editForm.mobile" prop='mobile'></el-input>
        </el-form-item>
      </el-form>
      <span slot='footer' class='dialog-footer'>
        <el-button @click='dialogVisible = false'>取消</el-button>
        <el-button type='primary' @click='editUser' @keyup.13='editUser'>确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" @close='setRoleDialogClosed'>
      <p>当前用户:{{userInfo.username}}</p>
      <p>当前角色:{{userInfo.role_name}}</p>
      <p>分配新角色：
        <el-select v-model="selectedRoleId" placeholder="请选择">
          <el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id">
          </el-option>
        </el-select>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRoleDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script scoped>
  export default {
    data() {
      var checkEmail = (rule, value, cb) => {
        const regEmail = /^\w+@\w+(\.\w+)+$/
        if (regEmail.test(value)) {
          return cb()
        }
        // 返回一个错误提示
        cb(new Error('请输入合法的邮箱'))
      }
      var checkMobile = (rule, value, cb) => {
        const regMobile = /^1[34578]\d{9}$/
        if (regMobile.test(value)) {
          return cb()
        }
        // 返回一个错误提示
        cb(new Error('请输入合法的手机号码'))
      }
      return {
        //   添加表单验证规则
        addFormRules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }, {
            min: 3,
            max: 10,
            message: '用户名的长度在3-10个字符之间',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }, {
            min: 6,
            max: 15,
            message: '密码的长度在6-15个字符之间',
            trigger: 'blur'
          }],
          email: [{
              required: true,
              message: '请输入邮箱',
              trigger: 'blur'
            },
            {
              validator: checkEmail,
              message: '邮箱格式不正确，请重新输入',
              trigger: 'blur'
            }
          ],
          mobile: [{
              required: true,
              message: '请输入手机号码',
              trigger: 'blur'
            },
            {
              validator: checkMobile,
              message: '手机号码不正确，请重新输入',
              trigger: 'blur'
            }
          ]
        },
        // 添加用户表单数据
        addForm: {
          username: '',
          password: '',
          email: '',
          mobile: ''
        },
        // 控制用户对话显示隐藏
        addDialogVisible: false,
        editDialogVisible: false,
        setRoleDialogVisible: false,
        rolesList: {},
        userInfo: {},
        selectedRoleId: '',
        // 查询到的用户信息对象
        editForm: {},
        //  修改表单的验证规则
        editFormRules: {
          email: [{
              required: true,
              message: '请输入邮箱',
              trigger: 'blur'
            },
            {
              validator: checkEmail,
              message: '邮箱格式不正确，请重新输入',
              trigger: 'blur'
            }
          ],
          mobile: [{
              required: true,
              message: '请输入手机号码',
              trigger: 'blur'
            },
            {
              validator: checkMobile,
              message: '手机号码不正确，请重新输入',
              trigger: 'blur'
            }
          ]
        },
        //   获取用户列表参数对象
        queryInfo: {
          query: '',
          //   当前的页数
          pagenum: 1,
          //   当前每页显示多少条数据
          pagesize: 2
        },
        userlist: [],
        total: 0
      }
    },
    created() {
      this.getUserList()
    },
    methods: {
      async removeUserById(id) {
        const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 如果用户点击确认，则confirmResult 为'confirm'
        //  如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
        if (confirmResult !== 'confirm') {
          return this.$message.info('已经取消删除')
        }
        // 发送请求根据id完成删除操作
        const {
          data: res
        } = await this.$axios.delete('users/' + id)
        // 判断如果删除失败，就做提示
        if (res.meta.status !== 200) return this.$message.error('删除用户失败')
        // 修改成功的提示
        this.$message.success('删除用户成功')
        // 重新请求最新的数据
        this.getUserList()
      },
      //  点击修改对应的对话框
      async showEditLog(id) {
        const {
          data: res
        } = await this.$axios.get('users/' + id)
        if (res.meta.status !== 200) return this.$message.error('查询用户信息失败！')
        this.$message.success('获取用户信息成功！')
        this.editForm = res.data
        this.editDialogVisible = true
      },
      editUser() {
        // 用户点击修改表单中的确定按钮之后，验证表单数据
        this.$refs.editFormRef.validate(async valid => {
          if (!valid) return this.$message.error('请填写完整用户信息')
          const {
            data: res
          } = await this.$axios({
            url: 'users/' + this.editForm.id,
            method: 'put',
            data: {
              email: this.editForm.email,
              mobile: this.editForm.mobile
            }
          })
          console.log(res)
          if (res.meta.status !== 200) return this.$message.error('修改用户失败！')
          this.$message.success('修改用户成功！')
          this.editDialogVisible = false
          this.getUserList()
        })
      },
      addUser() {
        // 点击确定按钮，添加新用户
        // 调用validate进行表单验证
        this.$refs.addFormRef.validate(async valid => {
          // 发送请求完成添加用户的操作
          const {
            data: res
          } = await this.$axios.post('users', this.addForm)
          // 判断如果添加失败，就做提示
          if (res.meta.status !== 201) return this.$message.error('添加用户失败')
          // 添加成功的提示
          this.$message.success('添加用户成功')
          // 关闭对话框
          this.addDialogVisible = false
          // 重新请求最新的数据
          this.getUserList()
        })
      },
      editDialogClosed() {
        this.$refs.editFormRef.resetFields()
      },
      //  监听用户对话框的关闭事件
      addDialogClosed() {
        this.$refs.addFormRef.resetFields()
      },
      // 监听switch开关
      async userStateChanged(userinfo) {
        const {
          data: res
        } = await this.$axios.put(`/users/${userinfo.id}/state/${userinfo.mg_state}`)
        if (res.meta.status !== 200) {
          userinfo.mg_state = !userinfo.mg_state
          return this.$message.error('更改用户信息失败')
        }
        this.$message.success('更改用户信息成功')
      },
      async getUserList() {
        const {
          data: res
        } = await this.$axios({
          url: '/users',
          params: this.queryInfo
        })
        if (res.meta.status !== 200) return this.$message.error('获取用户列表失败!')
        this.userlist = res.data.users
        this.total = res.data.total
        // console.log(this.userlist)
      },
      // 监听pagesize改变的事件
      handleSizeChange(newSize) {
        // console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getUserList()
      },
      //   监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        // console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getUserList()
      },
      // 展示分配角色的对话框
      async setRole(userinfo) {
        this.userInfo = userinfo
        const {
          data: res
        } = await this.$axios({
          url: 'roles'
        })
        if (res.meta.status !== 200) return this.$message.error('获取角色列表失败')
        this.rolesList = res.data
        this.setRoleDialogVisible = true
      },
      async saveRoleInfo() {
        if (!this.selectedRoleId) return this.$message.error('请选择要分配的角色！')
        const {
          data: res
        } = await this.$axios.put(`users/${this.userInfo.id}/role`, {
          rid: this.selectedRoleId
        })
        if (res.meta.status !== 200) return this.$message.error('更新角色失败')
        this.$message.success('更新角色成功')
        this.getUserList()
        this.setRoleDialogVisible = false
      },
      setRoleDialogClosed() {
        this.selectedRoleId = ''
        this.userInfo = ''
      }
    }
  }

</script>

<style lang='less' scoped>

</style>
